<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>注册</title>    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    
    <!-- your styles -->
    <link href="css/style.css" rel="stylesheet" media="screen">

     <!-- favicons
    ================================================== -->
    <link rel="shortcut icon" href="img/icons/favicon.ico">
    <link rel="apple-touch-icon" href="img/icons/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="72x72" href="img/icons/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="114x114" href="img/icons/apple-touch-icon-114x114.png">    

    <!-- html5 shim, for ie6-8 support of html5 elements -->
    <!--[if lt ie 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- styles for ie -->
    <!--[if lte ie 8]>
    <link rel="stylesheet" href="css/ie/ie.css" type="text/css" media="screen" />
    <![endif]-->
   
  </head>
  <body> 
    <div class="container wraper">
        <!-- header-->
        <header style="padding:40px 0;">            
            <!-- nav_logo-->
            <div class="nav_logo">            
                <div class="container">
                    <div class="row-fluid">

                        <!-- logo-->
                        <div class="span3 logo">
                            <a href="index.html" title="回到首页">                            
                                <img src="img/logo.png" alt="logo">
                            </a>
                        </div>
                        <!-- end logo-->
                                                      
                        <!-- nav-->
                        <nav class="span9">
                            <!-- menu-->
                            <ul id="menu" class="sf-menu">
                                <li><a href="index.html">回到首页</a></li>
                            </ul>
                            <!-- end menu-->
                        </nav>
                        <!-- end nav-->
                                                 
                    </div>
                </div>
            </div>
            <!-- end nav_logo-->
        </header>
        <!-- end header-->

        <section class="content_info" style="padding-top:0px;">
            
            <section class="info_resalt borders" style="background: url('file:///d:/workspace/web%20page%20resource/service/boxed/img/bg_index_static.png');">
                <div class="center_info">  
                     <div class="row-fluid">
						<div class="span5 offset1" style="border-right: 1px dashed #e5e5e5;">
							<form>
							  <fieldset>
								<legend><h1>注册用户</h1></legend>
								<div class="control-group">
									<div class="controls">
										 <div class="input-prepend">
											<span class="add-on" style="height:26px"><i class="icon-user"></i></span> 
											<input type="text" class="input-xlarge" style="height:26px" id="username" name="username" placeholder="用户名">
										 </div>
										<span class="username_help">&nbsp;</span>
									</div>
								 </div>
								<div class="control-group">
									<div class="controls">
										<div class="input-prepend">
											<span class="add-on" style="height:26px"><i class="icon-envelope"></i></span> 
											<input type="text" id="email" style="height:26px" class="input-xlarge" name="email" placeholder="电子邮件">
										</div>
										<span class="email_help">&nbsp;</span>
									</div>
								 </div>
								 <div class="control-group">
									<div class="controls">
										<div class="input-prepend">
											<span class="add-on" style="height:26px"><i class="icon-lock"></i></span> 
											<input type="password" id="password" style="height:26px" class="input-xlarge" name="password" placeholder="密码">
										</div>
										<span class="password_help">&nbsp;</span>
									</div>
								 </div>
								 <div class="control-group">
									<div class="controls">
										<div class="input-prepend">
											<span class="add-on" style="height:26px"><i class="icon-lock"></i></span> 
											<input type="password" class="input-xlarge" style="height:26px" name="conpassword" placeholder="确认密码">
										</div>
										<span class="conpassword_help">&nbsp;</span>
									</div>
								 </div>
								 <div class="control-group">
									<div class="controls">
										<button type="submit" class="btn btn-primary">登录</button>
										<button class="btn btn-danger">创建账户</button>
										<a class="btn">忘记密码...</a>
									</div>
								 </div>
							  </fieldset>
							</form>
						</div>
                        <div class="span6">
                            <div class="row-fluid">
								<div class="span6">
									<img src="img/reg_1.jpg">
								</div>
								<div class="span6" style="padding:20px">
									<h5>与世界连接</h5>
									<p>将您的设备接入松果网平台, 并通过应用进行远程管理和控制, 可以使您的设备快速迈进物联网时代。</p>
								</div>
							</div>
							<div class="row-fluid">
								<div class="span6" style="padding:20px">
									<h5>设备集中管理</h5>
									<p>支持各种通用协议，可以将您的各类智能设备集中起来进行管理和维护。</p>
								</div>
								<div class="span6">
									<img src="img/reg_2.jpg">
								</div>
							</div>
							<div class="row-fluid">
								<div class="span6">
									<img src="img/reg_3.png">
								</div>
								<div class="span6" style="padding:20px">
									<h5>创造自己的生活</h5>
									<p>带给无限可能的物联网环境，提供一个描绘美好生活的开放平台。</p>
								</div>
							</div>
                        </div>
                    </div>
                </div>
            </section>

        </section>
		<!-- footer-->
        <footer class="coopring">
            <p>© 2013 北京松果科技有限公司</p>
			<p><a href="http://www.miitbeian.gov.cn/" target="_blank">京icp备13022507号</a></p>
        </footer>      
        <!-- end footer-->
    </div>
   
        <!-- ======================= jquery libs =========================== -->
        <!-- always latest version of jquery-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <!--nav-->
        <script type="text/javascript" src="js/nav/tinynav.js"></script> 
        <script type="text/javascript" src="js/nav/superfish.js"></script>                                             
        <!--totop-->
        <script type="text/javascript" src="js/totop/jquery.ui.totop.js" ></script>                      
        <!-- bootstrap.js-->
        <script type="text/javascript" src="js/bootstrap/bootstrap.js"></script>
		<script src="http://cdnjs.bootcss.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="http://cdnjs.bootcss.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
		<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_zh.js"></script>
		<script src="js/localization/messages_zh.js"></script>
		<script src="js/jquery.html5storage.min.js"></script>
        <!-- ======================= end jquery libs =========================== -->
		<script type="text/javascript">
		
		$(document).ready(function() {
		
			$("#signup").validate({
				rules : {
					username : {
						required : true,
						alphanumeric : true,
						remote : "/rest/m/user/search/names"
					},
					email : {
						required : true,
						email : true,
						remote : "/rest/m/user/search/emails"
					},
					password : {
						required : true
					},
					conpassword : {
						required : true,
						equalto : "#password"
					}
				},
				errorPlacement: function(error, element) { 
					if ( element.is("input[name='username']") ){
						error.appendTo($("#username_help"));
					}
					else if ( element.is("input[name='email']") ) {
						error.appendTo($("#email_help")); 
					}
					else if ( element.is("input[name='password']") ){
						error.appendTo($("#password_help"));
					}
					else if ( element.is("input[name='conpassword']") ) {
						error.appendTo($("#conpassword_help")); 
					}

				},
				
				submithandler : function() {  
					var data = "{\"name\":\""+$("#username").val()+"\",";
					data += " \"email\":\""+$("#email").val()+"\",";
					data += " \"password\":\""+$("#password").val()+"\"}";
					$.ajax({
				    	type : "post",
				    	url : "/rest/m/user",
				    	contenttype : "application/json; charset=utf-8",
				    	data : data,
				    	success : function() {
				    		window.location = "/login.html";
				    	}
					});
		        }
			});
		
		});
	
	</script>

  </body>
</html>